<template>
  <div>
    <div class="mainBox">
      <ul>
        <li v-for="item in list2" :key="item.id">
          <img class="titleImg" v-lazy="item.image" alt="" />
          <p>{{ item.name }}</p>
          <div class="miaoBox">
            <img v-lazy="item.author_avatar" alt="" />
            <span>{{ item.author_name }}</span>
          </div>
        </li>
      </ul>
    </div>
    <br><br>
  </div>
</template>

<script>
export default {
  name: "GreensView",
  props: ["list2"],
};
</script>

<style scoped lang="scss">
.mainBox {
    margin-top: .2rem;
    height: 90vh;
    overflow: auto;
  ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    li {
      width: 47%;
      p{
        font-size: .36rem;
        margin-top: .1rem;
        text-align: center;
      }
      &:nth-child(2n) {
        padding: 0.5rem 0 0;
        box-sizing: border-box;
        .titleImg {
          border-top-left-radius: 0.3rem;
          border-bottom-left-radius: 0.3rem;
        }
      }
      &:nth-child(2n + 1) {
        .titleImg {
          border-radius: 0.3rem;
        }
      }
      .titleImg {
        width: 100%;
        height: 3rem;
      }
      .miaoBox {
        display: flex;
        align-items: center;
        margin-top: .2rem;
        img {
          width: .7rem;
          height: .7rem;
          border-radius: 50%;
          margin-right: .2rem;
        }
        span{
            font-size: .3rem;
        }
      }
    }
  }
}
</style>